<template>
    <div class="pro-good-wrap">
        <analysis-section title="竞品分析">
            <h-section>
                <template #title>
                    <flexbox>
                        <my-icon type="iconjingpin" style="font-size: 24px; color: #e02020" />
                        <span class="margin-l-8">竞品画布</span>
                    </flexbox>
                </template>
                <template #titleExtra>
                    <flexbox justify="flex-end" align="center" style="width: 100%">
                        <div class="cursor-pointer" @click="handleSave" v-if="!disabled">
                            <FileTextOutlined />
                            <span class="margin-l-8">保存</span>
                        </div>
                    </flexbox>
                </template>
                <pro-grid ref="proGridRef" :list="list" :cols="5" :disabled="disabled" />
            </h-section>
        </analysis-section>
    </div>
</template>

<script lang="ts">
import AnalysisSection from '@/views/productAnalysis/productDetail/components/AnalysisSection.vue';
import ProGrid from '@/views/productAnalysis/components/ProGrid.vue';
import { FileTextOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, unref } from 'vue';
export default defineComponent({
    components: {
        ProGrid,
        FileTextOutlined,
        AnalysisSection
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const proGridRef = ref<any>();
        const list = ref<any[]>([
            { name: '分析目标', placeholder: '为什么要做竞品分析，希望为产品带来什么帮助', value: '', type: 'text' },
            { name: '选择竞品', placeholder: '竞品名称版本，及选择理由', value: '', type: 'text' },
            { name: '分析维度', placeholder: '从哪几个角度来分析竞品？如：功能，市场策略（tips：结合产品阶段与分析目标来确定分析维度', value: '', type: 'text' },
            { name: '收集竞品信息', placeholder: '打算从哪些渠道手机竞品信息？如：对竞品做功能拆解，做客户访谈，竞品官网，财报，知乎...', value: '', type: 'text' },
            { name: '优势', placeholder: '与竞品相比，您的产品有哪些优点？（tips：可以结合分析维度）', value: '', type: 'text' },
            { name: '劣势', placeholder: '与竞品相比，您的产品有哪些缺点？', value: '', type: 'text' },
            { name: '机会', placeholder: '您的产品有哪些外部机会？', value: '', type: 'text' },
            { name: '威胁', placeholder: '您的产品有哪些外部威胁', value: '', type: 'text' },
            { name: '建议与总结', placeholder: '通过竞品分析，对您的产品有什么建议？采取什么竞争策略？得出了哪些结论？（tips：要考虑可操作性）', value: '', type: 'text' },
            { name: '竞品文档', value: [], type: 'uploadFile' }
        ]);
        const handleSave = () => {
            // delicacyCanvas  contendCanvas strategyCanvas
            const list = unref(proGridRef).cardList;
            emit('success', {
                query: {
                    delicacyCanvas: JSON.stringify(unref(list))
                }
            });
        };
        const init = () => {
            if (props.detail.delicacyCanvas) {
                list.value = JSON.parse(props.detail.delicacyCanvas);
            }
        };
        init();
        return {
            proGridRef,
            list,
            handleSave
        };
    }
});
</script>
<style scoped lang="less">
.pro-good-wrap {
    background: #fff;
    padding: 24px 0;
    margin-top: 24px;
}
</style>